<!DOCTYPE html>
<html>

<head lang="en">
    <title>问题信息</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap-4.1.1-dist/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/strategyDetails.css"/>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css"/>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <script src="/js/common.js"></script>
    <style>
        .askFoot {
            background-color: #fff;
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
            border-top: 1px solid #e5e5e5;
        }
        .btn-que {
            display: block;
            background: #ffa800;
            margin: 10px 4%;
            height: 20px;
            border-radius: 4px;
            color: #FFF;
            font-size: 1.5rem;
            text-align: center;
            line-height: 30px;
        }

    </style>
    <script>
        $(function () {
            //获取参数
            var params = getParams();
            //console.log(params.id);
            //发送请求获取对应文章信息(根据文章id查找)
            $.get("/questionsAndAnswers/" + params.id, function (data) {
                //填充文章信息
                $(".detail").renderValues(data);
            });

            $("#respondBtn").click(function () {
                var url=$(this).attr("href")
                console.log(url);
                $(this).attr('href','/mine/respond.html?id='+params.id)
            })

            //当前页
            var currentPage = 1;
            //总页数
            var pages;
            //是否查询的标记
            var loading = false;
            //用户存储游记的数组容器
            var travelData = [];
            //查询方fa
            function query() {
                //如果正在查询就不继续查了,退出
                if (loading) {
                    return;
                }
                //设置为查询状态
                loading = true;
                //根据类型发ajax请求获取对应的数据
                $.get('/respond/'+params.id, {currentPage: currentPage}, function (data) {
                    console.log(data.list);
                    //把查询的数据放到容器中
                    $.merge(travelData, data.list);
                    var json = {list: travelData};
                    //渲染数据
                    $("#comment").renderValues(json,{
                        getHref:getHref
                    });
                    //当前页+1
                    currentPage++;
                    //总页数
                    pages = data.pages;
                    //设置为没有在查询  本次查询结束
                    loading = false;
                });

            }

            //默认查询第一页
            query();

            //滚动页面 触发事件 翻页
            $(window).scroll(function () {
                //判断是否滚动到底部了  窗口的高度+文档滚动的高度 大于等于 文档的高度
                if ($(window).height() + $(document).scrollTop() >= $(document).height()) {
                    //如果当前页大于总页数就不查询了
                    if (currentPage <= pages) {
                        //查询
                        query();
                    } else {
                        $(document).dialog({
                            type: 'notice',
                            infoText: '亲,到底了',
                            autoClose: 1500,
                            position: 'center'  // center: 居中; bottom: 底部
                        });

                    }
                }
            });
        });
    </script>
</head>

<body>

<div class=" nav-search">
    <a href="javascript:history.go(-1);">
        <span><i class="fa fa-chevron-left"></i></span>
    </a>
</div>
<hr>

<div class="container detail">
    <h4 class="title"><strong render-html="title"></strong></h4>
    <img style="background-size: auto"  render-src="coverUrl">
    <div class="author"><span></span></div>
    <div class="content" render-html="content.content">
    </div>
</div>
<hr style="background-color: #e83e8c"/><hr style="background-color: #00bbd3"/><hr style="background-color: #6A6AFF"/><hr style="background-color: slateblue"/><hr/><hr/><hr/><hr/><hr style="background-color: #acacac"/><hr style="background-color: violet"/><hr style="background-color: #C0EBEF"/>
<br/>


<div id="comment">
    <div render-loop="list">

        <div class="container row comment">
            <h6>解答</h6>
            <div class="col-2 comment-head">
                <a id="userHref" render-fun="getHref" render-key="list.other.id"
                   data-url="/userProfiles.html?id=">
                    <img class="rounded-circle" render-src="list.other.headImgUrl">
                </a>
            </div>


            <div class="col comment-right">
                <p class="authorName"><span render-html="list.other.nickName"></span></p>


                <div class="comment-content">
                    <span render-html="list.details"></span>
                </div>

                <div class="d-flex icon" style="float:right;">
                    <span class="comment-date" render-html="list.createTime"></span>
                </div>
                <div>
                    <hr style="background-color: #732D2D"/>
                </div>
                <br/>
                <br/>
                <br/>
                <br/>
            </div>
        </div>
    </div>

</div>
<div class="askFoot" style="background-color: #e83e8c">
    <a href="/mine/respond.html?id=" class="btn-que" style="background-color: #e83e8c" id="respondBtn"><i></i>
        回答问题
    </a>
</div>
</body>
</html>